<style lang="stylus" scoped>
  .kaijiang
    height 100%
  .container
    background: url(../assets/ticketBg.png) no-repeat top left;
    background-size: 100% 100%;
    padding: 4.5rem 1.25rem 0 1.25rem;
    overflow: auto;
    padding-top: 4rem;
    padding-bottom 5rem;
    position: relative;
    box-sizing: border-box;
    height 100%
    .data-swiper
      height 100% 
    .slide
      overflow: hidden;
      transition: .5s;
      width: 100%;
      height auto
      padding: 1.25rem 1rem;
      box-sizing: border-box;
      border: 1px solid #b29b71;
      background-color: rgba(0,0,0,.5);
      border-radius: 15px;
      color: white;
      margin-bottom: .5rem;
      .text
        display: flex;
        align-items: center;
        justify-content: space-between;
        p 
          font-size: 1.125rem;
        .iconfont
          width: 10%;
          text-align: center;
          transform: rotate(180deg);
          transition: .5s;
          font-weight: bold;
          color: white;
          font-size: 2rem!important;
      .ballList
        display: flex;
        align-items: center;
        margin: .5rem 0;
        transition: .5s;
        margin-bottom: 1rem;
        opacity: 1!important;
        span 
          display: inline-block;
          width: 3.25rem;
          height: 3.25rem;
          background: url(../assets/redBallLight.png);
          background-size: 100% 100%;
          font-size: 1rem;
          color: black;
          font-weight: bold;
          text-align: center;
          line-height: 3.25rem;
          margin-left: .25rem;
          &:last-of-type
            background: url(../assets/blueBallLight.png);
            background-size: 100% 100%;
</style>


<template>
  <div class="kaijiang">
    <navTop title="开奖"></navTop>
    <div class="container">
      <swiper class="data-swiper" :options="swiperOption">
        <swiper-slide class="slide">
          <div class="text">
            <p class="stageNumber">20181105</p>
            <i class="iconfont icon-iconset0422"></i>
          </div>
          <div class="ballList">
            <span>1</span>
            <span>2</span>
            <span>7</span>
            <span>19</span>
            <span>30</span>
            <span>0</span>
          </div>
          <div class="winnerBarList">
            <span>无人中奖</span>
          </div>
        </swiper-slide>
        <swiper-slide class="slide">
          <div class="text">
            <p class="stageNumber">20181105</p>
            <i class="iconfont icon-iconset0422"></i>
          </div>
          <div class="ballList">
            <span>1</span>
            <span>2</span>
            <span>7</span>
            <span>19</span>
            <span>30</span>
            <span>0</span>
          </div>
          <div class="winnerBarList">
            <span>无人中奖</span>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import navTop from '../components/navTop'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data() {
    return {
      swiperOption:{
        direction: 'vertical',
        freeMode: true,
        slidesPerView :'auto'
      }
    }
  },
  components:{
    navTop,
    swiper,
    "swiper-slide":swiperSlide
  },
  methods:{
    href(){
      this.$router.push('/home')
    }
  }
}
</script>

